<template>
    <div class="container">
      <div class="header">饮品类</div>
      
      <div class="content">
        <!-- 抗炎饮品区域 -->
        <div class="drink-category anti-inflammatory">
          <div class="category-header">
            <div class="title">抗炎 ✓</div>
            <div class="description">富含维C、多酚、抗氧化物质</div>
          </div>
          <div class="drink-list">
            <div class="drink-item" v-for="drink in antiInflammatoryDrinks" :key="drink.id">
              <img :src="drink.icon" class="drink-icon" alt="饮品图标">
              <div class="drink-name">{{ drink.name }}</div>
            </div>
          </div>
        </div>
        
        <!-- 促炎饮品区域 -->
        <div class="drink-category pro-inflammatory">
          <div class="category-header">
            <div class="title">促炎 ×</div>
            <div class="description">含糖量高的饮料</div>
          </div>
          <div class="drink-list">
            <div class="drink-item" v-for="drink in proInflammatoryDrinks" :key="drink.id">
              <img :src="drink.icon" class="drink-icon" alt="饮品图标">
              <div class="drink-name">{{ drink.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        antiInflammatoryDrinks: [],
        proInflammatoryDrinks: []
      };
    },
    created() {
      // 页面创建时获取数据
      this.fetchDrinkData();
    },
    methods: {
      // 模拟从接口获取数据
      fetchDrinkData() {
        // 在实际项目中，这里应该是 API 调用
        // this.antiInflammatoryDrinks = await api.getAntiInflammatoryDrinks();
        // this.proInflammatoryDrinks = await api.getProInflammatoryDrinks();
        
        // 使用 mock 数据
        this.antiInflammatoryDrinks = [
          { id: 1, name: '绿茶', icon: '/static/images/green_tea.png' },
          { id: 2, name: '红茶', icon: '/static/images/black_tea.png' },
          { id: 3, name: '乌龙茶', icon: '/static/images/oolong_tea.png' },
          { id: 4, name: '白茶', icon: '/static/images/white_tea.png' },
          { id: 5, name: '黑咖啡', icon: '/static/images/black_coffee.png' },
          { id: 6, name: '红酒(适量)', icon: '/static/images/red_wine.png' }
        ];
        
        this.proInflammatoryDrinks = [
          { id: 7, name: '可乐', icon: '/static/images/cola.png' },
          { id: 8, name: '奶茶', icon: '/static/images/milk_tea.png' },
          { id: 9, name: '果汁、汽水', icon: '/static/images/juice_soda.png' }
        ];
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .header {
    text-align: center;
    background-color: #ffdd00;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 0;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  
  .content {
    display: flex;
    gap: 20px;
  }
  
  .drink-category {
    flex: 1;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .anti-inflammatory {
    background-color: #90ee90; /* 浅绿色 */
  }
  
  .pro-inflammatory {
    background-color: #ffa7a7; /* 浅红色 */
  }
  
  .category-header {
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  .description {
    font-size: 14px;
    color: #333;
  }
  
  .drink-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .drink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .drink-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  
  .drink-name {
    font-size: 14px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 在实际项目中，您需要添加相应的图标图片 */
  </style>